<template>
  <div class="shop">
    <div class="shop-nodata" v-if="shopList.length==0">
      <div class="shop-nodata-content">
        <img src="../../assets/agent/nodata.png" alt="">
        <p>还没有内容哦～</p>
      </div>
    </div>
    <div class="shop-content" v-else>
      <div class="shop-row" v-for="(data,index) in shopList" :key="index">
        <div class="shop-row-title">
          {{data.name}}
        </div>
        <div class="shop-row-content">
          <div class="shop-row-item">
            <p>{{data.phone}}</p>
          </div>
          <div class="shop-row-item">
            <p>{{data.addr}}</p>
          </div>
          <div class="shop-row-item">
            <p>设备：{{data.equipmentNumber}}</p>
            <span>使用率：{{data.userRate}}%</span>
          </div>
          <div class="shop-row-item">
            <p>添加时间：{{data.time}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        shopList: [{
            name: "重庆郭德纲",
            phone: "18888888888",
            addr:"重庆市两路口地铁站",
            proportion: "20",
            equipmentNumber: "10",
            time:"2021-01-01 23:59:59",
            userRate:"20",
            profit: "20",
            upName: "阿里巴巴",
            shopNumber: 66,
            isClick: false,
          },
          {
            name: "重庆郭德纲",
            phone: "18888888888",
            addr:"重庆市两路口地铁站",
            proportion: "20",
            userRate:"20",
            equipmentNumber: "33",
            profit: "20",
            upName: "腾讯",
            shopNumber: 66,
            isClick: true,
          }
        ],
      }
    },
    mounted() {
      document.title = "酒店列表"
    },
    methods: {
      goShop() {
        this.$router.push("/shop")
      }
    }
  };
</script>

<style lang="less" scoped>
  .shop {
    .shop-nodata {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 60vh;

      .shop-nodata-content {
        p {
          padding: 0;
          margin: 0;
          height: 16px;
          font-size: 16px;
          font-family: Adobe Heiti Std;
          font-weight: normal;
          color: #999999;
          text-align: center;
        }

        img {
          width: 245px;
          margin: 0 auto;
        }
      }

    }

    .shop-content {
      box-sizing: border-box;
      padding: 15px 16px;
    }

    .shop-row {
      margin-bottom: 11px;
      background: #FFFFFF;
      box-shadow: 0px 0px 9px 0px rgba(51, 51, 51, 0.09);
      border-radius: 5px;
      padding: 0 12px;

      .shop-row-title {
        padding: 17px 0 9px 0px;
        font-size: 16px;
        color: #1677FF;
        font-weight: bold;
        border-bottom: 1px solid #eee;

        span {
          font-size: 12px;
          color: #999999;
          margin-left: 15px;
        }
      }

      .shop-row-content {
        padding: 9px 0;
        font-weight: bold;

        .shop-row-item {
          display: flex;
          justify-content: space-between;
          align-items: center;

          color: #333333;
          font-size: 14px;

          p {
            margin: 0;
            padding: 9px 0;
          }
        }
      }

      .shop-footer {
        font-size: 14px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 17px 0;

        p {
          padding: 0;
          margin: 0;
        }

        img {
          width: 20px;
        }
      }
    }
  }
</style>
<style lang="less">

</style>
